<!DOCTYPE html>
<html class="x-admin-sm">
{include file='public/header'}
<style>
    .layui-form-label{width: 100px;}
    .layui-input-block{margin-left: 130px;}
</style>
<body>
    <div class="x-body">
        <form class="layui-form" lay-filter="formAjax">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>负责人名称
                </label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" placeholder="负责人名称" required="required"
                        lay-verify="required" autocomplete="off" class="layui-input" value="" />
                    <div class="layui-form-mid layui-word-aux">（负责人账号）</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>密码
                </label>
                <div class="layui-input-block">
                    <input type="password" name="password" id="password" placeholder="密码" required="required"
                        lay-verify="required" autocomplete="new-password" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>公司
                </label>
                <div id="pMenu" style="width:100%;flex:1"></div>
            </div>
            <div class="layui-form-item official_accounts" style="display: none;">
                <label class="layui-form-label">
                    <span class="x-red">*</span>公众号
                </label>
                <div id="officialAccountsList" style="width: 100%;flex: 1;"></div>
            </div>
            <div class="layui-form-item " >
                <label class="layui-form-label">
                    手续费比例(%)
                </label>
                <div class="layui-input-block">
                    <input type="number" name="commission_scale" id="commission_scale" placeholder="请输入手续费比例" autocomplete="off" class="layui-input" value="" />
                    
                </div>
            </div>
            <div class="layui-form-item " >
                <label class="layui-form-label">
                    微信小程序官方手续费比例(%)
                </label>
                <div class="layui-input-block">
                    <input type="number" name="wechat_applet_commission_scale" id="wechat_applet_commission_scale" placeholder="请输入微信小程序官方手续费比例" autocomplete="off" class="layui-input" value="" />

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    是否分销商
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="is_distributor" lay-filter="is_distributor" lay-verify="isOnly" value="0" title="否" checked>
                    <input type="radio" name="is_distributor" lay-filter="is_distributor" lay-verify="isOnly" value="1" title="是">
                </div>
            </div>
            <div class="layui-form-item scale" style="display: none;">
                <label class="layui-form-label">
                    分成比例(%)
                </label>
                <div class="layui-input-block">
                    <input type="number" name="scale" id="scale" placeholder="请输入分成比例" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div id="chooseVideo" style="display: none;">
                <div class="layui-form-item" style="display: flex;">
                    <label class="layui-form-label">
                        选择短剧
                    </label>
                    <div id="videoList" style="width: 100%;flex: 1;"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    是否分公司管理
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="is_branch_office_manage" lay-verify="isOnly" value="0" title="否" checked>
                    <input type="radio" name="is_branch_office_manage" lay-verify="isOnly" value="1" title="是">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    状态
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="is_depart" lay-filter="is_depart" lay-verify="isOnly" value="0" title="在职" checked>
                    <input type="radio" name="is_depart" lay-filter="is_depart" lay-verify="isOnly" value="1" title="离职">
                </div>
            </div>
            <input type="hidden" id="video_ids" name="video_ids">
            <input type="hidden" id="official_account_id" name="official_account_id">
            <input type="hidden" name="id" id="id" value="" />
            <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;" />
        </form>
    </div>
    <script>
        let params = {
            addUrl: '/admin/responsibilityPerson/add',
            editUrl: '/admin/responsibilityPerson/edit',
            detailUrl: '/admin/responsibilityPerson/detail',
        }
        form_ajax(params)
        let id = GetQueryString('id')
        let selectParams = {
            url: '/admin/company/select',
            selected: [],
            tips: '选择公司',
            name: 'company_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pMenu'
        }
        let xmSelectOfficialAccountsOption = {
            url:'/admin/officialAccounts/select',
            initValue:'',//初始值
            initFn:function(){
                $('#official_account_id').val(xmSelectOfficialAccountsOption.initValue.toString())
            },//有初始值的操作
            el:'#officialAccountsList',
            showCount:4,
            direction:'down',//下拉方向
            onFn:function(data){
                var arr = data.arr;
                let official_account_id = [];
                arr.forEach(item=>{
                    official_account_id.push(item.id)
                })
                $('#official_account_id').val(official_account_id.toString())
            },
        }
        let xmSelectOption = {
            url:'/admin/video/select',
            initValue:'',//初始值
            initFn:function(){
                $('#video_ids').val(xmSelectOption.initValue.toString())
            },//有初始值的操作
            el:'#videoList',
            direction:'down',//下拉方向
            onFn:function(data){
                var arr = data.arr;
                let video_ids = [];
                arr.forEach(item=>{
                    video_ids.push(item.id)
                })
                $('#video_ids').val(video_ids.toString())
            },
        }
        if (id) {
            Ajax(params.detailUrl, { id }).then(result => {
                selectParams.selected = [result.data.company_id]
                selectN(selectParams)
                if(result.data.company_id){
                    showAccounts(result.data.company_id,result.data?.official_account_id)
                    if (result.data.scale) {
                        $('.scale').show()
                    } else {
                        $('.scale').hide()
                    }
                }
                if(result.data.is_distributor === 1){
                    $('#chooseVideo').show()
                    xmSelectOption.initValue = result.data.video_ids?.split(',');
                    xmSelectA(xmSelectOption)
                }
            });
            
        } else {
            selectN(selectParams)
        }
        
        function infoSelectN(option,value){
            if(option.elem == '#pMenu'){
                $('#official_account_id').val('')
                xmSelectOfficialAccountsOption.initValue = []
                showAccounts(value)
            }
        }
        function showAccounts(value = 3, official_account_id = ''){
            xmSelectOfficialAccountsOption.url = `/admin/officialAccounts/select?company_id=1`
            if (official_account_id) {
                xmSelectOfficialAccountsOption.initValue = official_account_id
            }
            xmSelectA(xmSelectOfficialAccountsOption)
            $('.official_accounts').css('display','flex')
        }
        
        layui.use('form', function(){
            var form = layui.form;
            form.on('radio(is_distributor)', function(data){
                if(data.value == 1){
                    $('.scale').show()
                    $("#chooseVideo").show()
                    xmSelectA(xmSelectOption)
                }else{
                    $('.scale').hide()
                    $("#chooseVideo").hide()
                }
            });
            form.verify({
                isOnly: function(value, item){ //value：表单的值、item：表单的DOM对象
                    let is_distributor = form.val("formAjax").is_distributor
                    let is_branch_office_manage = form.val("formAjax").is_branch_office_manage
                    let is_depart = form.val("formAjax").is_depart
                    if(is_distributor == 1 && is_branch_office_manage == 1){
                        return '分销商和分公司管理只能选择一个！';
                    }
                }
            });
        });
        

    </script>
</body>

</html>